<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会议详情页</title>
    <link rel="shortcut icon" href="../../../resources/static/header/assets/images/favicon.ico">
    <link rel="stylesheet" href="../../../resources/static/header/assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="../../../resources/static/header/assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="../../../resources/static/header/assets/css/style.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="../../../resources/static/commomsjs/commons.js"></script>

</head>
<body>
<div id="app">
<div class="header section">
    <div class="header-top bg-name-primary">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-6">
                    <div class="header-top-msg-wrapper">
                        <p class="header-top-message">Welcome To our shop !</p>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="header-top-settings">
                        <ul class="nav">
                            <li class="curreny-wrap">
                                <a href="#">USD</a>
                                <i class="fa fa-angle-down"></i>
                                <ul class="dropdown-list curreny-list">
                                    <li><a href="#">$ USD</a></li>
                                    <li><a href="#">€ EUR</a></li>
                                    <li><a href="#">£ GBP</a></li>
                                    <li><a href="#">₹ INR</a></li>
                                    <li><a href="#">¥ JPY</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-bottom">
        <div class="header-sticky">
            <div class="container">
                <div class="row align-items-center position-relative">
                    <div class="col-lg-3 col-md-4 col-6">
                        <div class="header-logo">
                            <a href="index.html"><img src="../../../resources/static/header/assets/images/logo/logo.png" alt="Site Logo" /></a>
                        </div>
                    </div>
                    <div class="col-lg-6 d-none d-lg-block">
                        <div class="main-menu">
                            <ul>
                                <li class="has-children">
                                    <a href="#">Home</a>
                                    <ul class="sub-menu">
                                        <li><a href="index.html">Home 1</a></li>
                                        <li><a href="index-2.html">Home 2</a></li>
                                        <li><a href="index-3.html">Home 3</a></li>
                                        <li><a href="index-4.html">Home 4</a></li>
                                    </ul>
                                </li>
                                <li class="has-children position-static">
                                    <a href="#">Shop</a>
                                    <ul class="mega-menu">
                                        <li class="mega-menu-col">
                                            <h4 class="mega-menu-title">Shop Layout</h4>
                                            <ul class="m-b-n10">
                                                <li><a href="shop.html">Shop Grid</a></li>
                                                <li><a href="shop-left-sidebar.html">Left Sidebar</a></li>
                                                <li><a href="shop-right-sidebar.html">Right Sidebar</a></li>
                                                <li><a href="shop-list-fullwidth.html">List Fullwidth</a></li>
                                                <li><a href="shop-list-left-sidebar.html">List Left Sidebar</a></li>
                                                <li><a href="shop-list-right-sidebar.html">List Right Sidebar</a></li>
                                            </ul>
                                        </li>
                                        <li class="mega-menu-col">
                                            <h4 class="mega-menu-title">Product Layout</h4>
                                            <ul class="m-b-n10">
                                                <li><a href="single-product.html">Single Product</a></li>
                                                <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                                <li><a href="single-product-variable.html">Single Product Variable</a></li>
                                                <li><a href="single-product-countdown.html">Single Product Countdown</a></li>
                                                <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                                <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                            </ul>
                                        </li>
                                        <li class="mega-menu-col">
                                            <h4 class="mega-menu-title">Other Pages</h4>
                                            <ul class="m-b-n10">
                                                <li><a href="my-account.html">My Account</a></li>
                                                <li><a href="login.html">Login | Register</a></li>
                                                <li><a href="wishlist.html">Wishlist</a></li>
                                                <li><a href="cart.html">Cart</a></li>
                                                <li><a href="checkout.html">Checkout</a></li>
                                                <li><a href="compare.html">Compare</a></li>
                                            </ul>
                                        </li>
                                        <li class="mega-menu-col">
                                            <div class="megamenu-image">
                                                <a href="shop.html">
                                                    <img class="fit-image" src="../../../resources/static/header/assets/images/header/mega-menu.png" alt="Megamenu Image">
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-children">
                                    <a href="#">Pages</a>
                                    <ul class="sub-menu">
                                        <li><a href="about.html">About Us</a></li>
                                        <li><a href="contact.html">Contact Us</a></li>
                                        <li><a href="error-404.html">Error 404</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="login.html">Login</a></li>
                                        <li><a href="register.html">Register</a></li>
                                    </ul>
                                </li>
                                <li class="has-children">
                                    <a href="#">Blog</a>
                                    <ul class="sub-menu">
                                        <li><a href="blog.html">Blog</a></li>
                                        <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                        <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                        <li><a href="blog-details.html">Blog Details</a></li>
                                        <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                    </ul>
                                </li>
                                <li><a href="about.html">About</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-8 col-6">
                        <div class="header-actions">
                            <div class="header-action-btn header-action-btn-search d-none d-md-flex">
                                <div class="action-execute">
                                    <a class="action-search-open" href="javascript:void(0)"><i class="icon-magnifier icons"></i></a>
                                    <a class="action-search-close" href="javascript:void(0)"><i class="ti-close"></i></a>
                                </div>
                                <form class="header-search-form" action="#">
                                    <input type="text" class="header-search-input" placeholder="Search Our Store">
                                    <button class="header-search-button"><i class="icon-magnifier icons"></i></button>
                                </form>
                            </div>
                            <a href="my-account.html" class="header-action-btn header-action-btn-wishlist">
                                <i class="icon-user icons"></i>
                            </a>
                            <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
                                <a class="cart-visible" href="javascript:void(0)">
                                    <i class="icon-handbag icons"></i>
                                    <span class="header-action-num">3</span>
                                </a>
                                <div class="header-cart-content">
                                    <div class="cart-product-wrapper">
                                        <div class="cart-product-inner p-b-20 m-b-20 border-bottom">
                                            <div class="single-cart-product">
                                                <div class="cart-product-thumb">
                                                    <a href="single-product.html"><img src="../../../resources/static/header/assets/images/header/header-cart/1.png" alt="Cart Product"></a>
                                                </div>
                                                <div class="cart-product-content">
                                                    <h3 class="title"><a href="single-product.html">Basic Dog Trainning</a></h3>
                                                    <div class="product-quty-price">
                                                        <span class="cart-quantity">Qty: <strong> 1 </strong></span>
                                                        <span class="price">
															<span class="new">$70.00</span>
                                                            </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart-product-remove">
                                                <a href="#/"><i class="icon-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="cart-product-inner p-b-20 m-b-20 border-bottom">
                                            <div class="single-cart-product">
                                                <div class="cart-product-thumb">
                                                    <a href="single-product.html"><img src="../../../resources/static/header/assets/images/header/header-cart/2.png" alt="Cart Product"></a>
                                                </div>
                                                <div class="cart-product-content">
                                                    <h3 class="title"><a href="single-product.html">Wait, You Need This</a></h3>
                                                    <div class="product-quty-price">
                                                        <span class="cart-quantity">Qty: <strong> 1 </strong></span>
                                                        <span class="price">
															<span class="new">$80.00</span>
                                                            </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart-product-remove">
                                                <a href="#/"><i class="icon-close"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cart-product-total p-b-20 m-b-20 border-bottom">
                                        <span class="value">Total</span>
                                        <span class="price">200$</span>
                                    </div>
                                    <div class="cart-product-btn m-t-20">
                                        <a href="cart.html" class="btn btn-outline-light btn-hover-primary w-100">View cart</a>
                                        <a href="checkout.html" class="btn btn-outline-light btn-hover-primary w-100 m-t-20">Checkout</a>
                                    </div>
                                </div>
                            </div>
                            <div class="header-action-btn header-action-btn-cart d-flex d-sm-none">
                                <a href="cart.html">
                                    <i class="icon-handbag icons"></i>
                                    <span class="header-action-num">3</span>
                                </a>
                            </div>
                            <a href="javascript:void(0)" class="header-action-btn header-action-btn-menu d-lg-none d-md-flex">
                                <i class="icon-menu"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<div class="section breadcrumb-area bg-name-bright">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="breadcrumb-wrapper">
                    <h2 class="breadcrumb-title">{{meetinfo.meetTitle}}</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section section-margin">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 offset-lg-0 col-md-8 offset-md-2">
                <div class="product-details-img">
                    <div class="single-product-img swiper-container product-gallery-top">
                        <div class="swiper-wrapper popup-gallery">
                            <a class="swiper-slide w-100" href="path+'manageWeb/images/'+meetinfo.meetPicture">
                                <img :src="path+'manageWeb/images/'+meetinfo.meetPicture" alt="Product"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="showTable" class="col-lg-7">
                <div class="product-summery position-relative">
                    <div class="product-head m-b-15">
                        <h2 class="title">{{meetinfo.meetTitle}}
                            <template v-if="meetinfo.processState==0">
                                <a  class="action">报名中</a>
                            </template>
                            <template v-if="meetinfo.processState==1">
                                <a  class="action">进行中</a>
                            </template>
                            <template v-if="meetinfo.processState==2">
                                <a  class="action">已结束</a>
                            </template>
                            <template v-if="isCollect">
                                <a  href="#" title="取消收藏"  class="action" @click="delCollect()">已收藏</a>
                            </template>
                            <template v-if="!isCollect">
                                <a  href="#" title="收藏"  class="action" @click="toCollect()"><i class="ti-heart"></i></a>
                            </template>
                        </h2>
                    </div>
                    <div class="sku m-b-15">
                        <span>时间：{{meetinfo.beginTime}}至{{meetinfo.endTime}}</span>
                    </div>
                    <div class="sku m-b-15">
                        <span>地点：{{meetinfo.province.provinceName}}.{{meetinfo.city.cityName}}.{{meetinfo.reginon.reginonName}}.{{meetinfo.detailsAddress}}</span>
                    </div>
                    <div class="sku m-b-15">
                        <span>主办方:{{meetinfo.organizers.organizersName}}</span>
                    </div>
                    <template v-if="meetinfo.processState==0">
                        <table class="table border mb-0">
                            <tbody>
                            <tr >
                                <td class="cun-name">门票类型</td>
                                <td class="cun-name">单价</td>
                                <td class="cun-name">参与</td>
                            </tr>
                            <template v-for="meetLevel in MeetLevels">
                                <tr>
                                    <td >{{meetLevel.levelName}}</td>
                                    <td>{{meetLevel.cost}}</td>
                                    <td>
                                        <a  class="action" title="支付" @click="toBuy(meetLevel.id)" href="#"><i class="icon-handbag icons"></i></a>
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </template>
                    <template v-if="meetinfo.processState==1">
                        <h2  class="title">活动正在进行，感谢您的关注</h2>
                    </template>
                    <template v-if="meetinfo.processState==2">
                        <h2  class="title">活动已结束，感谢您的关注</h2>
                    </template>
                    <div class="social-share">
                        <div class="widget-social justify-content-start m-b-30">
                            分享：
                            <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                            <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                            <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                            <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                            <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="showPay" class="col-lg-7">
                <div class="product-summery position-relative">
                    <div class="product-head m-b-15">
                        <h2 class="title">{{meetinfo.meetTitle}}
                            <a  class="action">{{meetinfo.processState}}</a>
                        </h2>
                    </div>
                    <div class="sku m-b-15">
                        <span>时间：{{meetinfo.beginTime}}至{{meetinfo.endTime}}</span>
                    </div>
                    <div class="sku m-b-15">
                        <span>地点：{{meetinfo.province.provinceName}}.{{meetinfo.city.cityName}}.{{meetinfo.reginon.reginonName}}.{{meetinfo.detailsAddress}}</span>
                    </div>
                    <div class="sku m-b-15">
                        <span>主办方:{{meetinfo.organizers.organizersName}}</span>
                    </div>
                    <div>请选择支付方式：</div>
                    <div>
                        <a  class="action" title="微信"  @click="toPay()"  href="#">微信</a>
                        <a  class="action" title="支付宝" @click="toPay()"  href="#">支付宝</a>
                        <a  class="action" title="银行卡" @click="toPay()" href="#">银行卡</a>
                        <a  class="action" title="返回" @click="back()"  href="#"><<</a>
                    </div>
                </div>
            </div>
            <div v-if="showSuccess" class="col-lg-7">
                <div>
                    <h2 class="title" href="index.html"><a href="index.html">支付成功，返回首页</a></h2>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section section-padding bg-name-bright">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 single-product-tab">
                <ul class="nav nav-tabs m-b-n15" id="myTab" role="tablist">
                    <li class="nav-item m-b-15">
                        <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#connect-1" role="tab" aria-selected="true">会议介绍</a>
                    </li>
                    <li class="nav-item m-b-15">
                        <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#connect-2" role="tab" aria-selected="false">主办方介绍</a>
                    </li>
                    <li class="nav-item m-b-15">
                        <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#connect-3" role="tab" aria-selected="false">会议嘉宾介绍</a>
                    </li>
                    <li class="nav-item m-b-15">
                        <a class="nav-link" id="review-tab" data-bs-toggle="tab" href="#connect-4" role="tab" aria-selected="false">场馆介绍</a>
                    </li>
                </ul>
                <div class="tab-content mb-text" id="myTabContent">
                    <div class="tab-pane fade show active" id="connect-1" role="tabpanel" aria-labelledby="home-tab">
                        <div class="section section-margin">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-9 m-auto overflow-hidden">
                                        <div class="blog-details-wrapper">
                                            <div class="blog-details-content">
                                                <div class="blog-image">
                                                    <img :src="path+'manageWeb/images/'+meetinfo.meetPicture" alt="Blog Image" class="fit-image"/>
                                                </div>
                                                <div class="blog-details-title-meta">
                                                    <h2 class="title">{{meetinfo.meetTitle}}</h2>
                                                </div>
                                                <blockquote>会议详情：</blockquote>
                                                <p>{{meetinfo.meetDetails}}</p>
                                                <blockquote>时间安排：</blockquote>
                                                <table class="table border mb-0">
                                                    <tbody>
                                                    <tr>
                                                        <td class="cun-name"><span>开始报名时间</span></td>
                                                        <td>{{meetinfo.signBeginTime}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="cun-name"><span>报名截止时间</span></td>
                                                        <td>{{meetinfo.signEndTime}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="cun-name"><span>会议开始时间</span></td>
                                                        <td>{{meetinfo.beginTime}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="cun-name"><span>会议结束时间</span></td>
                                                        <td>{{meetinfo.endTime}}</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                                <blockquote>会议进程安排：</blockquote>
                                                <p>{{meetinfo.meetProcess}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="connect-2" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="section section-margin">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-9 m-auto overflow-hidden">
                                        <div class="blog-details-wrapper">
                                            <div class="blog-details-content">
                                                <div class="blog-image">
                                                    <img :src="path+'manageWeb/images/'+meetinfo.organizers.organizersPicture" alt="Blog Image" class="fit-image"/>
                                                    organizersPicture
                                                </div>
                                                <div class="blog-details-title-meta">
                                                    <h2 class="title">{{meetinfo.organizers.organizersName}}</h2>
                                                </div>
                                                <blockquote>介绍：</blockquote>
                                                <p>{{meetinfo.organizers.organizersDetails}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="connect-3" role="tabpanel" aria-labelledby="contact-tab">
                        <template v-for="guest in Guests">
                            <div class="product_tab_content m-t-40 p-3 border">
                                <div class="single-review d-flex m-b-20">
                                    <div class="review_thumb">
                                        <img alt="review images" :src="path+'manageWeb/images/'+guest.guestPicture">
                                    </div>
                                    <div class="review_details">
                                        <P>{{guest.guestName}}</P>
                                        <p>{{guest.guestIntroduction}}</p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="tab-pane fade" id="connect-4" role="tabpanel" aria-labelledby="review-tab">
                        <div class="section section-margin">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-9 m-auto overflow-hidden">
                                        <div class="blog-details-wrapper">
                                            <div class="blog-details-content">
                                                <div class="blog-image">
                                              <img :src="path+'manageWeb/images/'+meetinfo.hall.hallPicture" alt="Blog Image" class="fit-image"/>
                                                </div>
                                                <div class="blog-details-title-meta">
                                                    <h2 class="title">{{meetinfo.hall.hallName}}</h2>
                                                </div>
                                                <blockquote>介绍：</blockquote>
                                                <p>{{meetinfo.hall.hallDetails}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="../../../resources/static/header/assets/js/vendor.min.js"></script>
<script src="../../../resources/static/header/assets/js/plugins.min.js"></script>
<script src="../../../resources/static/header/assets/js/main.js"></script>
</body>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            meetinfo:{id:0},
            path:"http://localhost:8080/",
            meetinfoId:null,
            MeetLevels:[],
            Guests:[],
            showTable:true,
            showPay:false,
            chooseLevelId:null,
            showSuccess:false,
           /* showNoCollect:true,
            showIsCollect:false,*/
            isCollect:false
        },
        created:function(){
            this.initMeetinfo();
            this.initMeetLevels();
            this.initGuests();
            this.initCollectState();
            this.initIsCollect();
        },
        methods:{
            delCollect:function(){
                var meetId=this.GetQueryString("meetId");
                // var userinfoId= sessionStorage.getItem("id");
               // axios.get(this.path+"web/delCollect?meetId=" + meetId+"userinfoId="+userinfoId)
                axios.get(this.path+"web/delCollect?meetId=" + meetId)
                    .then(res => {
                        this.isCollect=false;
                    });
            },
            toCollect:function(){
                var meetId=this.GetQueryString("meetId");
               // axios.get(this.path+"web/toCollect?meetId=" + meetId+"userinfoId="+userinfoId)
                axios.get(this.path+"web/toCollect?meetId=" + meetId)
                    .then(res => {
                        this.isCollect=true;

                    });
            },
            initCollectState:function(){
                var meetId=this.GetQueryString("meetId");
                axios.get(this.path+"manage/selectAMeet?meetId=" + meetId)
                    .then(res => {

                    });

            },
            initIsCollect:function(){
              // var userinfoId= sessionStorage.getItem("id");
                var meetId=this.GetQueryString("meetId");
              //  axios.get(this.path+"web/selectIsCollect?meetId=" + meetId+"&userinfoId="+userinfoId)
                axios.get(this.path+"web/selectIsCollect?meetId=" + meetId)
                    .then(res => {
                this.isCollect=res.data.data;
                    });
            },
            initMeetinfo:function(){
                var meetId=this.GetQueryString("meetId");
                axios.get(this.path+"manage/selectAMeet?id=" + meetId)
                    .then(res => {
                        this.meetinfo=res.data.data;
                    });
            },
            initMeetLevels:function(){
                var meetId=this.GetQueryString("meetId");
                axios.get(this.path+"web/selectLevelByMeetId?meetId=" + meetId)
                    .then(res => {
                        this.MeetLevels=res.data.data;
                    });
            },
            initGuests:function(){
                var meetId=this.GetQueryString("meetId");
                axios.get(this.path+"web/selectGuestByMeetId?meetId=" + meetId)
                    .then(res => {
                        this.Guests=res.data.data;
                    });
            },
            toBuy:function(meetLevelId){
                this.showPay=true;
                this.showTable=false;
                this.chooseLevelId=meetLevelId;
            },
            back:function(){
                this.showPay=false;
                this.showTable=true;
            },
            toPay:function(){
                var meetId=this.GetQueryString("meetId");
                // var userinfoId= sessionStorage.getItem("id");
                //axios.get(this.path+"web/addJoinMember?meetId=" + meetId+"&meetLevelId="+this.chooseLevelId+"&userinfoId="+userinfoId)
                axios.get(this.path+"web/addJoinMember?meetId=" + meetId+"&meetLevelId="+this.chooseLevelId)
                    .then(res => {
                    this.showPay=false;
                    this.showSuccess=true;
                    });
            },
            GetQueryString:function(name)
            {
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            }
        }
    })
</script>
</html>